<template>
  <ContentContainer
    name="绑定记录"
    :pagination="pagination"
    :refresh="false"
    :loading="loading"
    @run="run">
    <template #header-prefix>
      <div class="title">绑定记录</div>
    </template>
    <a-table
      ref="tableRef"
      v-bind="commonTableProps"
      :columns="columns"
      :data="data"
      @sorter-change="onSorterChange">
      <template #type="{ record }">
        {{ getOptionLabel(record.type, bindTypeOptions) }}
      </template>
    </a-table>
  </ContentContainer>
</template>
<script lang="ts" setup>
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import { getAdminApiLicenseBindRecordsApi } from '@/apis/modules/authBind'
import useTableColumn from './column'
const { columns } = useTableColumn()

const route = useRoute()
const license_id = computed(() => route.params.id as string)
const params = ref<CloudFilterBarState>({
  order: 'desc',
  sort: 'expired_at'
})

const { data, loading, run, pagination } = useListRequest(
  getAdminApiLicenseBindRecordsApi,
  {
    immediate: true,
    params: {
      license_id: license_id.value
    }
  }
)
const { createSortChange } = useTable(run, data)
const onSorterChange = createSortChange(params)
</script>

<style lang="less" scoped></style>
